<template>
  <el-drawer
    :title="title"
    :modal-append-to-body="false"
    :modal="false"
    size="auto"
    :wrapperClosable="false"
    :visible.sync="isShow"
    @closed="closeDrawer"
    direction="rtl"
    class="station-detail">
    <div class="drawer-body p-a-15">
      <el-form :inline="true" size="small" label-width="60px">
          <el-form-item label="范围：">
            <el-select v-model="distance_km" placeholder="请选择" @change="getList">
              <el-option
                v-for="item in initData.distanceList"
                :key="item.id"
                :label="item.name"
                :value="item.id">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item class="fr">
            <i class="el-icon-info c-blue m-r-5"></i>共: <b>{{list.length}}</b>条数据
          </el-form-item>
      </el-form>
      <div class="list">
        <el-table
          ref="multipleTable"
          :data="list"
          size="small"
          border
          height="100%"
          style="width: 100%">
          <el-table-column label="编号" type="index" width="80" align="center" />
          <el-table-column label="企业名" prop="name" min-width="200px">
            <template slot-scope="scope">
              <el-link :underline="false" type="primary" @click="flyTo(scope.row)">{{scope.row.name}}</el-link>
            </template>
          </el-table-column>
          <el-table-column label="污染源类别" prop="class" />
          <el-table-column label="站点距离(m)" prop="distance" width="120px">
            <template slot-scope="scope">
              {{scope.row.distance.toFixed(1)}}
            </template>
          </el-table-column>
          <el-table-column label="操作" width="80px">
            <template slot-scope="scope">
              <el-link
                :underline="false"
                type="primary"
                icon="el-icon-edit"
                @click="handleEdit(scope.row)"
              >编辑</el-link>
            </template>
          </el-table-column>
        </el-table> 
      </div> 
    </div>  
  </el-drawer>
</template>
<script>
export default {
  props:{
    
  },
  data(){
    return {
      isShow: false,
      title: null,
      distance_km: 1,
      params: {},
      list: [],
      initData:{
        distanceList:[
          {id:1, name: '半径1公里'},
          {id:3, name: '半径3公里'},
          {id:5, name: '半径5公里'},
        ]
      }
    }
  },
  methods:{
    init(params){
      this.isShow = true;
      this.params = params;
      this.title = params.name + '周边企业查询';
      this.getList();
      
    },
    getList(){
      let params = {
        station_id: this.params.id,
        city_name: this.params.city,
        distance_km: this.distance_km,
      }
      this.$request('get', '/air/stations/industry_list', params, (data,msg) => {
        this.list = data;
      })
    },
    handleEdit(row){
      this.$emit('edit', row);
    },
    closeDrawer(){
      this.distance_km = 1;
      this.list = [];
      this.$emit('close')
    },
    flyTo(data){
      // this.isShow = false;
      this.$emit('flyTo', data);
    }
  }
}
</script>